<template>
  <div class="flex flex-col border-t-2 border-gray-500 solid h-1/6  rounded-br-lg ">
    <!--播放栏位区-->
    <div class="h-1/2 flex ">
      <div class="w-1/4 flex justify-center items-center "><img :src="$store.state.songCover"
          class="w-12 h-12 ml-2 mr-2"></div>
      <!--正在播放的歌曲封面-->
      <div class="w-1/2  flex items-center">
        <!--进度条区-->
        <div class=" h-4 w-full " @click="ClickProgress">
          <v-slider class="" thumb-color="black" v-model="slider" :max="max"></v-slider>
        </div>
        <div>{{ formatTime(Math.floor(musicCurrentTime)) }}</div>
      </div>
      <div class="flex items-center relative ml-10 mt-4">

        <svg t="1732964561004" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="3745" width="32" height="32">
          <path
            d="M537.6 145.066667L554.666667 128v768l-85.333334-85.333333-298.666666-298.666667 64-64 302.933333-302.933333zM469.333333 341.333333l-166.4 170.666667 166.4 170.666667V341.333333z m170.666667-123.733333c145.066667 21.333333 256 145.066667 256 294.4s-110.933333 273.066667-256 294.4v-85.333333c98.133333-21.333333 170.666667-106.666667 170.666667-209.066667s-72.533333-187.733333-170.666667-209.066667v-85.333333z m0 128c72.533333 17.066667 128 85.333333 128 166.4s-55.466667 145.066667-128 166.4v-89.6c25.6-12.8 42.666667-42.666667 42.666667-72.533333s-17.066667-59.733333-42.666667-72.533334V345.6z"
            fill="#444444" p-id="3746"></path>
        </svg>
      </div>
    </div>
    <div class=" h-1/2 flex justify-center items-center">
      <div class=" w-1/2 h-full flex justify-center items-center ">
        <img src="/favicon.ico" class="w-10 h-10">
        <img :src="iconSrc" class="ml-10 mr-10 w-10 h-10 hover:cursor-pointer" @click="playMusic">
        <svg t="1732964440323" class="icon " viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="2684" width="32" height="32">
          <path
            d="M956.915826 484.47273l-105.340577 106.496578c-8.706131 8.344881-22.758767 8.344881-31.392648 0l-104.690327-106.496578c-12.354759-14.594511-4.082128-19.760389 4.551753-28.213646h95.911946c-26.515769-143.59698-152.194736-252.47781-303.522473-252.47781-117.081211 0-218.84541 65.025048-271.262823 160.936993l-52.309039-20.91639c60.94292-116.539335 182.828759-196.158894 323.571862-196.158894 182.467509 0 333.144994 133.879348 360.202639 308.616101h79.800184c8.597756 8.453256 13.113385 19.83264 4.479503 28.213646z m-751.1838-22.614267l105.340577 106.388203c8.706131 8.453256 4.190503 19.83264-4.551753 28.285896H215.341283c36.666902 129.43597 155.698864 224.372539 297.056092 224.372539 107.544204 0 202.191773-54.98229 257.463064-138.358851l52.850914 21.097015c-64.302547 103.895576-179.071756 173.400127-310.313978 173.400127-172.605376 0-316.527482-119.826713-354.531009-280.51083H74.164679c-8.633881-8.453256-16.906512-13.691385-4.443378-28.285896l104.618077-106.388203c8.633881-8.453256 22.686517-8.453256 31.392648 0z"
            fill="#231815" p-id="2685"></path>
        </svg>

      </div>
    </div>
  </div>
  <!--播放栏位区结束-->
</template>
<script>
  export default {
    name: 'PlayMech',
    data() {
      return {
        iconSrc: "https://dmsgame.obs.cn-south-1.myhuaweicloud.com/%E6%92%AD%E6%94%BE%E5%92%8C%E6%9A%82%E5%81%9C%E5%9B%BE%E6%A0%87/Play.svg",
        slider: 0,
        musicCurrentTime: 0,
        IsClick: false,
        max: 100,
        value: 0
      }

    },
    methods: {
      playMusic(Music) {
        Music = this.$store.state.audioObj
        if(Music.src=="http://127.0.0.1:3030/0"){
            console.log("没有播放原");
            alert("没有播放源")
            return
        }
        console.log(Music.src);

        if (Music.paused) {
          Music.play()
        } else {
          Music.pause()
        }
      },

      ClickProgress() {
        this.IsClick = true
        console.log(111);
      },
      formatTime(seconds) {
        const minutes = Math.floor((seconds % 3600) / 60);
        const sec = seconds % 60;
        const formattedMinutes = minutes.toString().padStart(2, '0');
        const formattedSeconds = sec.toString().padStart(2, '0')
        return `${formattedMinutes}:${formattedSeconds}`;
      }

    },
    computed: {

    },
    mounted() {
      this.$store.state.audioObj.addEventListener('play', () => {
        this.iconSrc = "https://dmsgame.obs.cn-south-1.myhuaweicloud.com/%E6%92%AD%E6%94%BE%E5%92%8C%E6%9A%82%E5%81%9C%E5%9B%BE%E6%A0%87/Pause.svg"
      });
      this.$store.state.audioObj.addEventListener('pause', () => {
        this.iconSrc = "https://dmsgame.obs.cn-south-1.myhuaweicloud.com/%E6%92%AD%E6%94%BE%E5%92%8C%E6%9A%82%E5%81%9C%E5%9B%BE%E6%A0%87/Play.svg"
      });
      this.$store.state.audioObj.addEventListener('timeupdate', () => {

        this.slider = this.$store.state.audioObj.currentTime / this.$store.state.audioObj.duration * 100;
        this.musicCurrentTime = this.$store.state.audioObj.currentTime;
      });

    },

    watch: {
      slider: function (oldval, newval) {
        if (this.IsClick == true) {
          console.log('监视到了');
          this.$store.state.audioObj.currentTime = newval / 100 * this.$store.state.audioObj.duration
          console.log(newval / 100 * this.$store.state.audioObj.duration);
          this.IsClick = false
        }

      }
    }

  }
</script>